<template>
  <div>
    <div>
      <a-button type="primary" style="margin-bottom:10px" @click="tiaozhuan">
        <i style="font-size:21px;padding-right:10px;line-height:16px">+</i>新建
      </a-button>
      <div>
        <a-input
          placeholder="请输入商品名称"
          style="width:200px;margin-bottom:20px"
          v-model="querys.orderNo"
        />
        <a-input
          placeholder="请输入条形码"
          style="width:200px;margin-bottom:20px;margin-left:5px"
          v-model="barcode.ser"
        />
        <a-select defaultValue="选择商品状态" style="color:#ddd;margin-left:5px">
          <a-select-option value="Option1-1">下架</a-select-option>
          <a-select-option value="Option1-2">正常</a-select-option>
        </a-select>
        <a-button type="primary" style="margin-left:10px" @click="seach">查询</a-button>
      </div>
    </div>
    <a-table
      rowKey="id"
      :columns="goodsColumns"
      :loading="loading"
      :pagination="pagination"
      @change="handleTableChange"
      :dataSource="loadData"
      :scroll="{ x: 1370,}"
      class="components-table-demo-nested frelist"
    >
      <span slot="img" slot-scope="text">
        <img :src="text" alt style="width:40px;height: 30px;" />
      </span>
      <span slot="detail" slot-scope="text,record">
        <a-button
          type="primary"
          style="font-size: 12px;
            font-size: 12px;
            padding: 0 7px;
            margin: 0 5px 5px 5px;
            border: 0;
            height: 24px;"
          @click="showModal(record.categoryId)"
        >查看</a-button>
      </span>
      <span slot="status" slot-scope="text">
        <a-tag color="blue" v-if="text===1">在售</a-tag>
        <a-tag color="#666666" v-if="text===0">未售</a-tag>
      </span>
      <span slot="action" slot-scope="text,record" style="padding:0">
        <a-button
          type="primary"
          @click="edit(record)"
          class="flyray-btn">编辑</a-button>
        <a-button
          type="primary"
          v-show="record.status==0"
          class="flyray-btn"
          @click="activated(record.id)"
        >激活</a-button>
        <a-button
          type="primary"
          v-show="record.status==1"
          class="flyray-btn"
          @click="freeze(record.id)"
        >冻结</a-button>
        <a-button type="danger"
        class="table-danger flyray-btn"
          @click="showDeleteConfirm(record)" >删除</a-button>
      </span>
      <a-table
        rowKey="id"
        slot="expandedRowRender"
        slot-scope="record"
        :columns="innerColumns"
        :dataSource="record.skuList"
        :pagination="false"
      ></a-table>
    </a-table>
    <!-- 对话框查看 -->
    <a-modal title="商品详情" :footer="null" v-model="visible">
      <p style="text-align:center">{{getcategoryId}}</p>
    </a-modal>
  </div>
</template>
<script>
import { getList, getEdit, freezeOrActivation, getDelete } from '@/api/mall/goods'

import { goodsColumns,innerColumns} from '@/const/crud/mall/goods.config'


export default {
  //组件注册
  components: {
  },
  //声明  变量
  data() {
    return {
      // innerData,
      innerColumns,
      goodsColumns,

      //商品查询
      querys: {
        orderNo: null
      },
      //商品条码查询
      barcode: {
        ser: null
      },
      //查看空数组
      getcategoryId: [],
      //
      parameter: {
        pageNo: 1,
        pageSize: 10,
        title: null,
        spuId: null,
        spuDTO: null,
        status: null
      },
      // spuDTO :{},
      barcode: {
        ser: null
      },
      pagination: {
        total: 0,
        pageSize: 10,
        title: null,
        showSizeChanger: false,
        showTotal: total => `共有${total} 条数`
      },

      // 定义一个空数组 在后台获取items数据添加
      loadData: [],
      queryParam: {},
      loading: true,
      visible: false,
      confirmLoading: false,
      labelCol: { span: 4 },
      wrapperCol: { span: 14 },
      other: '',
      form: {
        name: '',
        region: undefined,
        date1: undefined,
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      }
    }
  },

  //生命周期
  created() {
    this.getList()
    // this.getDelete();
    // this.getEdit()
  },
  methods: {
    tiaozhuan() {
      this.$router.push({
        path: '/mall/goods/goodsDetail'
      })
    },
    //查看
    showModal(val) {
      this.visible = true
      this.getcategoryId = val
      // console.log(this.getcategoryId);
    },
    // 查询
    seach() {
      // console.log(this.parameter)
      this.parameter.title = this.querys.orderNo
      this.getList(this.seach)
      // this.parameter.skuList.barCode= this.barcode.ser;
      // console.log(this.parameter.skuList.barCode)
      // this.getList(this.each);
    },
    //从后台获取数据  打印调试
    getList() {
      getList(Object.assign(this.parameter)).then(res => {
        // res返回的数据 接口回显
        this.loadData = res.data.items
        //总条数
        this.pagination.total = res.data.total
        this.loading = false
      })
    },
    handleTableChange(pagination) {
      this.parameter.pageNo = pagination.current //点击的页码
      this.parameter.pageSize = pagination.pageSize //一页显示多少条
      this.getList()
      // console.log(this.parameter);
    },
    //删除
    getDelete() {
      getDelete(Object.assign(this.parameter)).then(res => {
        // console.log(res)
        this.getList()
        // console.log(res)
      })
    },

    showDeleteConfirm(val) {
      var _this = this
      _this.parameter.spuId = val.id
      this.$confirm({
        title: `确定删除------${val.title}-------吗？`,
        // content: _this.titl,
        okText: 'Yes',
        okType: 'danger',
        cancelText: 'No',
        onOk() {
          //删除调用
          _this.getDelete()
        },
        onCancel() {
          // console.log('Cancel');
        }
      })
    },
    // 激活
    activated(val) {
      //  console.log(val);
      this.parameter.spuId = val
      this.parameter.status = 1
      freezeOrActivation(Object.assign(this.parameter)).then(res => {
        this.parameter.spuId = null
        this.parameter.status = null
        this.getList()
      })
    },
    // 冻结
    freeze(val) {
      this.parameter.spuId = val
      this.parameter.status = 0
      freezeOrActivation(Object.assign(this.parameter)).then(res => {
        this.parameter.spuId = null
        this.parameter.status = null
        this.getList()
      })
    },
    //  编辑
    edit(val) {
      // console.log(val)
      this.$router.push({
        path: '/mall/goods/goodsDetail',
        query: { id: val.id }
      })
    }
  }
}
</script>
<style scoped>
 .flyray-btn{
  font-size:12px;padding:0 7px;margin:0 0 0 3px;height:24px;
}
.table-danger{
    color: #fff;
    background-color: #ff4d4f;
    border-color: #ff4d4f;
    margin-left: 5px;
}
.ant-table-thead > tr > th,
.ant-table-tbody > tr > td {
  text-align: left !important;
}
.ant-table-thead > tr > th {
  background: white;
  padding: 16px 11px !important;
}
.ant-table-tbody > tr > td {
  background: white;
  padding-top: 16px;
  text-align: center !important;
}

.ant-modal-confirm-body .ant-modal-confirm-content {
  padding-top: 10px !important;
  font-size: 16px !important;
}
.ant-modal-confirm-btns .ant-btn {
  border: 1px solid #6666;
}
.ant-modal-confirm-btns .ant-btn-primary {
  border: 1px solid rgb(250, 21, 21) !important;
  color: rgb(250, 21, 21) !important;
  background: white !important;
}
.ant-modal-root > .ant-modal-mask {
  background-color: rgba(0, 0, 0, 0.1) !important;
}
.ant-modal-wrap {
  background: none !important;
}
.ant-table-fixed-right table {
  width: 230px;
}
.frelist tr a button {
  font-size: 12px;
  background: #52c41a;
  font-size: 12px;
  padding: 0 7px;
  margin: 0 5px 5px 5px;
  border: 0;
  height: 24px;
}

</style>